<template>
  <div>
    <div style="text-align: center;">
      <qrcode
        :text="form.urlCode"
        :width="300"
        :logo="require('@/assets/img/logo.png')"
      />
    </div>
    <div class="dialong__button--wrap">
      <el-button @click="close">取消</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, unref, PropType, onUnmounted } from 'vue'
import { getDetApi, setApi, getAlipayFacePayOrderApi } from '../api'
import Qrcode from '_c/Qrcode/index.vue'

export default defineComponent({
  name: 'FacePay',
  components: {
    Qrcode
  },
  props: {
    info: {
      type: Object as PropType<any>,
      default: () => null
    }
  },
  emits: ['close', 'success'],
  setup(props, { emit }) {
    const form = reactive({
      id: '', // id
      urlCode: '', // 二维码链接地址
      totalAmount: 0, // 付款金额
      myInterval: ''
    })

    async function getAlipayFacePayOrder() {
      if (props.info) {
        const id = (props.info as any).id
        try {
          const res = await getAlipayFacePayOrderApi({
            params: {
              id: id
            }
          })
          if (res) {
            form['urlCode'] = res.result.alipay_trade_precreate_response.qr_code
            await _getOrderStatus()
          }
        } catch (e) {
          console.log(e)
        }
      }
    }
    getAlipayFacePayOrder()

    // 获取订单支付状态
    const _getOrderStatus = async() => {
      const id = (props.info as any).id
      const params = {
        params: {
          id: id
        }
      }

      const myStateInterval = setInterval(() => {
        setTimeout(async() => {
          const res = await getDetApi(params)
          if (res.status === 200) {
            if (res.result['status'] === 1) {
              clearInterval(Number(myStateInterval))
              emit('success', '成功')
              close()
            }
          }
        }, 1)
      }, 3000)

      form.myInterval = String(myStateInterval)
    }

    function close() {
      clearInterval(Number(form.myInterval))
      emit('close')
    }
    onUnmounted(() => {
      console.info('执行onUnmounted--------------')
      clearInterval(Number(form.myInterval))
    })
    return {
      form,
      close
    }
  }
})
</script>

<style>
</style>
